@import '../../config.scss';

@mixin b($block) {
  $B: $namespace + '-' + $block;

  .#{$B} {
    @content;
  }
}

@mixin bId($block) {
  $B: $namespace + '-' + $block;

  ##{$B} {
    @content;
  }
}

// 自定义滚动条
@mixin roll($isSnap: false,
  $padding: 10px,
  $snapType: mandatory,
  $snapDirection: y,
  $snapAlign: start,
  $thumbColor: rgba(0, 0, 0, 0.1),
  $thumbHoverColor: false,
  $w: 10px,
  $h: 10px) {
  @if $isSnap {
    scroll-snap-type: $snapDirection $snapType;

    @if $snapDirection ==x {
      scroll-padding-left: $padding;
      scroll-padding-right: $padding;
    }

    @else {
      scroll-padding-top: $padding;
      scroll-padding-bottom: $padding;
    }

    // 滚动优化
    &>* {
      scroll-snap-align: $snapAlign;

      &:last-of-type {
        margin-bottom: 0px;
      }
    }
  }

  overflow: auto;
  scrollbar-width: thin;

  &::-moz-scrollbar,
  &::-webkit-scrollbar {
    width: $w;
    height: $h;
  }

  &::-moz-scrollbar-track,
  &::-webkit-scrollbar-track {
    background-clip: padding-box;
    border: solid transparent;
    border-width: 1px;
  }

  &::-moz-scrollbar-corner,
  &::-webkit-scrollbar-corner {
    background-color: transparent;
  }

  &::-moz-scrollbar-thumb, 
  &::-webkit-scrollbar-thumb {
    background-color: $thumbColor;
    background-clip: padding-box;
    border: solid transparent;
    border-radius: 10px;
  }

  &::-moz-scrollbar-thumb:hover,
  &::-webkit-scrollbar-thumb:hover {
    @if $thumbHoverColor {
      background-color: $thumbHoverColor;
    }

    @else {
      background-color: fade-in($thumbColor, 0.2);
    }

    // background-color: scale-color($thumbColor, $lightness: 20%);
  }
}